<template>
  <div class="pagination-box">
    <div style="float: right">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        @current-change="_currentChange"
        :total="total">
      </el-pagination>
    </div>
    <div>
      <el-pagination
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes"
        :total="total"
        @size-change="_sizeChange">
      </el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  props: ['pageSize', 'total', 'currentPage', 'pageSizes'],
  methods: {
    _sizeChange (size) {
      this.$emit('sizeChange', size)
    },
    _currentChange (current) {
      this.$emit('currentChange', current)
    }
  }
}
</script>


<style scoped>
.pagination-box {
  margin-top: 20px;
  overflow: hidden;
}
</style>
